<template>
	<view>
		<view class="example-title">编辑门店信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<image style="width:200upx;height:180upx" mode="aspectFit" :src="item.imgUrl" @error="imageError" @click="chooseImage"/>
				<view class="uni-flex uni-column">
					<uni-list-item :show-arrow="false" title="名称" />
					<uni-list-item :show-arrow="false" title="地址" />
				</view>
				<view class="uni-flex uni-column">
					<input class="uni-input" maxlength="30" style="text-align:right;width: 400upx;" v-model="item.shopName"  placeholder="填写门店名称" />
					<input class="uni-input" maxlength="50" style="text-align:right;width: 400upx;" v-model="item.address"  placeholder="填写门店地址" />
				</view>
			</view>
		</uni-list>
		<view class="example-title">店主信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="名称" thumb="userInfo.img||'/static/img/none.jpg'"/>
				<input class="uni-input" style="text-align:right;" v-model="userInfo.userName" disabled="true"  placeholder="填写店主名称" />
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="电话" :show-extra-icon="true"  :extra-icon="{color: '#4cd964',size: '22',type: 'phone'}"/>
				<input class="uni-input" style="text-align:right;" v-model="userInfo.tel" disabled="true"  placeholder="填写联系电话" />
			</view>
		</uni-list>
		<view class="example-title">操作</view>
		<uni-list>
				<uni-list-item :show-switch="true" :show-arrow="false" title="设置为当前门店" @switchChange="switchChange" :switch-checked="item.isCurrentShop==1"/>
				<view class="uni-flex uni-row" style="justify-content: center;">
					<view class="tag-view">
						<uni-tag text="返回" type="success" :circle="true" @click="back"/>
					</view>
					<view class="tag-view">
						<uni-tag text="提交" type="primary" :circle="true" @click="confirm" v-no-more-click/>
					</view>
				</view>
		</uni-list>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue";
		//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var graceChecker = require("@/common/graceChecker.js");
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['hasLogin', 'userInfo','baseUrl']),
		components: {
			uniList,
			uniListItem,
			uniTag
		},
		data() {
			return {
				imageShow:false,
				shopId:null,
				isCurrentShop:0,
				item:{imgUrl:'/static/img/none.jpg'},
				extraIcon1: {
					color: '#007aff',
					size: '22',
					type: 'info-filled'
				},
				extraIcon2: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				}
			}
		},
		onLoad(parm){
			if(parm.shop){
				var shop=JSON.parse(decodeURIComponent(parm.shop));
				this.shopId=shop.id;
				this.isCurrentShop=shop.isCurrentShop;
			}
		},
		async onShow(){
			if(!this.hasLogin){
				this.isLogin();
				return;
			}
			let data={};
			if(this.shopId){
				data={id:this.shopId};
			}
			let res =await this.$request.get("/shop/getShop", {
				data:data
			});
			console.log(JSON.stringify(res.data))
			this.item=res.data;
			this.$set(this.item,'isCurrentShop',this.isCurrentShop);
		},
		methods: {
			...mapMutations(['isLogin']),
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0];
						this.$set(this.item,'imgUrl',imageSrc);
						this.imageShow=true;
						
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			imageError: function(e) {
				console.log(e.detail.errMsg+":"+JSON.stringify(this.item))
				this.$set(this.item,'imgUrl','/static/img/none.jpg');
			},
			//设置为当前门店
			switchChange(e) {
				if (e.value) {
					this.$set(this.item,'isCurrentShop',1);
				}else{
					this.$set(this.item,'isCurrentShop',0);
				}
			},
			back(){
				var pages = getCurrentPages();
				if(pages.length==1){
					uni.switchTab({
						url: '/pages/shop/index'
					});
				}else{
					uni.navigateBack({
						delta:1
					});
				}
			},
			confirm(){
					var rule = [{
						name: "shopName",
						checkType: "string",
						checkRule: "1,30",
						errorMsg: "店名应为1-30个字符"
					},
					{
						name: "address",
						checkType: "string",
						checkRule: "1,60",
						errorMsg: "地址应为1-60个字符"
					}
				];
				var checkRes = graceChecker.check(this.item, rule);
				if (checkRes) {
						uni.uploadFile({
							url: this.baseUrl+'/shop/edit',
							filePath: this.imageShow?this.item.imgUrl:'',
							fileType: 'image',
							name: this.imageShow?'file':'',
							formData: this.item,
							header: {
								'token': uni.getStorageSync("token"),
							},
							success: (res) => {
								if(this.item.isCurrentShop==1){
									uni.setStorage({
										key: 'currentShop',
										data: this.item
									});
								}else{
									if(uni.getStorageSync("currentShop")&&uni.getStorageSync("currentShop").id==this.item.id){
										uni.removeStorageSync("currentShop");
									}
								}
								this.back();
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}
	
	.tag-view {
		margin: 10upx 50upx;
		display: inline-block;
	}
	
	.uni-input{
		font-family: Hiragino Sans GB;
		font-size: 28upx;
		color: #777;
	}
</style>
